<!DOCTYPE html>  
<html lang="en">  
<head>  
    <!-- 设置文档字符编码为UTF-8 -->  
    <meta charset="UTF-8">  
    <!-- 设置视口属性以优化移动设备浏览 -->  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <!-- 页面标题为账号登录 -->  
    <title>账号登录</title>  
    <!-- 引入外部样式表 -->  
    <link rel="stylesheet" href="注册.css">  
    <style>  
        /* 登录表单容器样式 */  
        .large-box {    
            width: 400px;   
            height: 300px;   
            border: 5px solid #ffffff;    
            margin: 150px auto;   
            padding: 10px;   
            background-color: #ffffff;   
            text-align: center;    
        }  
    </style>  
</head>  
<body>  
    <!-- 背景容器，用于设置背景图片或颜色 -->  
    <div id="background-container"></div>  
    <!-- 引入外部JavaScript脚本 -->  
    <script src="注册.js"></script>  
  
    <!-- 登录表单容器 -->  
    <div class="large-box">  
        <!-- 表单标题 -->  
        <h1>账号登录</h1>  
        <!-- 登录表单 -->  
        <form id="loginForm">  
            <!-- 用户名输入字段 -->  
            <label for="usernameLogin">用户名:</label>    
            <input type="text" id="usernameLogin" required><br><br>  
  
            <!-- 密码输入字段 -->  
            <label for="passwordLogin">密码:</label>    
            <input type="password" id="passwordLogin" required><br><br>  
            <script>  
                function validateForm() {  
                    var username = document.getElementById('usernameLogin').value;  
                    var password = document.getElementById('passwordLogin').value;  
                    if (username === '' || password === '') {  
                        alert('用户名和密码不能为空！');  
                        return false; // 阻止导航到其他页面  
                    }  
                    return true; // 允许导航到其他页面  
                }  
            </script>
            <a href="主页.html" class="button-style" onclick="return validateForm();">     
                登录      
            </a>   
            <style>  
            .button-style {    
                display: inline-block;    
                padding: 10px 20px;    
                background-color: #4CAF50;   
                border: none;    
                color: white;    
                text-align: center;    
                text-decoration: none;    
                font-size: 16px;    
                margin: 4px 2px;    
                cursor: pointer;    
            }  
            </style>  
        </form>  
  
        <!-- 跳转到注册页面的链接 -->  
        <a href="注册.html">没有账号？注册一个</a>  
    </div>  
</body>  
</html>